<template>
    <div class="header clearfix" >
        <el-button type="success" class="left" @click="$router.replace('/roomplan/default')">调整默认价格</el-button>
        <h3 class="right">注意: 只能调整20日之内的价格,新的一天的价格按照默认预定值生成</h3>
    </div>
    <el-calendar>
        <template #dateCell="{data}">
            <div class="calendar-cell">
                <p>{{data.day.split('-').slice(1).join('-')}}</p>
                <div v-if="data.date < today">
                    <el-button type="info" v-if="data.date < today" class="btn-price" @click="handleClick(data.day, false)" size="medium">查看以往价格</el-button>
                </div>
                <div v-else-if="data.date >= today && priceResizable(data.date)">
                    <el-button type="primary"  class="btn-price" @click="handleClick(data.day, true)" size="medium">查看或调整价格</el-button>
                </div>
                <div v-else>
                    <el-button  class="btn-price" disabled size="medium">暂时未能调整</el-button>
                </div>
             </div>
</template>
    </el-calendar>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        computed: {
            today() {
                let date = new Date();
                date.setHours(0);
                date.setMinutes(0);
                date.setSeconds(0);
                date.setMilliseconds(0);
                return date;
            }
        },
        methods: {
            handleClick(day, priceResizable) {
                this.$router.push({
                    path: '/roomplan/price',
                    query: {
                        day, priceResizable
                    }
                })
            },
            priceResizable(date) {
                date = new Date(date.getFullYear(), date.getMonth(), date.getDate());
                let maxDate = new Date();
                maxDate.setDate(maxDate.getDate() + 20);
                maxDate.setHours(0);
                maxDate.setMinutes(0);
                maxDate.setSeconds(0);
                maxDate.setMilliseconds(0);
                return date < maxDate;
            }
        }
    }
</script>

<style scoped>
    .clearfix:after{
        content: "020";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        /* 触发 hasLayout */
        zoom: 1;
    }
    .header .left {
        float: left;
    }
    .header .right {
        float: right;
    }
    .calendar-cell {
        text-align: center;
    }
    .calendar-cell .btn-price {
        margin-top: 5px;
    }

</style>